<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <link rel="stylesheet" type="text/css" href="../static/all/css/font-awesome.css" media="all">
  <link rel="stylesheet" type="text/css" href="../static/all/css/login.css" media="all">
  <link rel="stylesheet" type="text/css" href="../static/all/css/btn.css" media="all" />
</head>
<script src="../static/all/js/jquery-3.2.1.js"></script>
<script src="../static/all/js/bootstrap.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
      d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
    </path>
  </svg>
  <div class="user">
    <i class="fa fa-user"></i>
    <div class="head">account login</div>
  </div>
  <div class="container">
    <div class="box login">
      <div class="form-content">
        <div class="avtar">
          <div class="pic"><img src="../static/all/img/1.jpg" alt=""></div>
        </div>
        <div><h1>Welcome back</h1></div>
        <div><h2 style="color: red;font-size: 21px" th:if="${param.error}">用户名或密码错误</h2></div>
        <form th:action="@{/login}"  method="post" class="form">
          <div>
            <i class="fa fa-user-o"></i>
            <input name="username" type="text" placeholder="username">
          </div>
          <div>
            <i class="fa fa-key"></i>
            <input name="password" type="password" placeholder="password">
          </div>
          <div style="margin-top: 10px"><input style="width: 1rem" type="checkbox" name="remember">记住我</div>
          <div class="btn">
            <button>login</button>
          </div>
        </form>
        <p class="btn-something">
          没 有 账 号 吗 ? 点 击 创 建 <span class="signupbtn">signup</span>
        </p>
      </div>
    </div>
    <div class="box signup">
      <div class="form-content">
        <div class="avtar">
          <div class="pic"><img src="../static/all/img/2.jpg" alt=""></div>
        </div>
        <h1>注 册 用 户</h1>
        <form  id="register" method="post" class="form" onsubmit="return false">
          <div>
            <i class="fa fa-user-o"></i>
            <input type="text" class="userName" id="userName" name="userName" placeholder="username" required>
          </div>
          <div>
            <i class="fa fa-user-o"></i>
            <input type="text" name="realName" id="realName" placeholder="realName" required>
          </div>
          <!--<div>
            <i class="fa fa-envelope-o"></i>
            <input type="email" placeholder="email">
          </div>-->
          <div>
            <i class="fa fa-key"></i>
            <input type="password" name="password" id="password" placeholder="password" required>
          </div>
          <div class="btn">
            <button class="signupbtn" onclick="checksignUp()">signup</button>
          </div>
        </form>
        <p class="btn-something">
          已 经 有 账 号 啦 ? 点 击 登 录 <span class="loginbtn">login</span>
        </p>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  $(function() {
    let login = document.querySelector(".login");
    let signup = document.querySelector(".signup");

    let loginbtn = document.querySelector(".loginbtn");
    let siginupbtn = document.querySelector(".signupbtn");

    let user = document.querySelector(".head");

    siginupbtn.addEventListener("click", () => {
      login.style.transform = "rotateY(180deg)"
      signup.style.transform = "rotateY(0deg)";

      user.innerHTML = "create account"
    })

    loginbtn.addEventListener("click", () => {
      login.style.transform = "rotateY(0deg)"
      signup.style.transform = "rotateY(-180deg)";

      user.innerHTML = "account login"
    })

    function signupuser() {
      alert("你已经注册成功!");
    }

  })
  
  
   /* function check() {
      $("#register").validate({
        debug: true,
        rules: {
          userName: {required: true},
          realName: {required: true},
          password: {required: true}
        },
        messages: {
          userName: {required: "必填"},
          realName: {required: "必填"},
          password: {required: "必填"}
        }
      });
    }*/

    function checksignUp() {
      //check();
      let validate = $('#register').valid();
      console.log(validate);

     if (validate===true){

       var username = $(".userName").val();
       var realName = $("#realName").val();
       var password = $("#password").val();
       console.log(username);
       $.ajax({
         url: "/checksignUp",
         type: 'post',
         data: {
           "username": username
         },
         success: function (result) {
           console.log(result);
           console.log(username);
           console.log(realName);
           console.log(password);

           if (result==="true"){
             //var formData = new FormData($("#register")[0]);
             $.ajax({
               url: "/signUp",
               type: 'post',
               data: {
                 "userName": username,
                 "realName": realName,
                 "password": password
               },
               success: function (result) {
                 // console.log(result);
                 alert("你已经注册成功!");
                 document.write(result);
                 return true;
               },
               error: function (result) {
                 //console.log(result);
                 alert("注册失败!");
                 return false;
               }
             });
           }else {
             alert("用户名已经存在!");
             return false;
           }
         },
         error: function (result) {
           // console.log(result);
           alert("用户名已经存在!");
           return false;
         }
       });
     }



    }


</script>



</html>